@import '../../mixins'

// ---
// -- Navigation
// -
.NavigationBar
  box(relative, flex)
  min-height: var(--nav-btn-height)
  z-index: 2000
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)

.Sidebar[data-hidden-panels-bar] .NavigationBar
  box-shadow: inset 0 -1px 0 0 var(--border-fg), 0 0 12px 0 var(--border-fg)

#root[data-nav-layout="horizontal"] .NavigationBar
#root[data-nav-layout="hidden"] .NavigationBar
  size(100%)
  box-shadow: inset 0 -1px 0 0 var(--border-fg), 0 0 12px 0 #00000000
#root[data-nav-layout="vertical"] .NavigationBar
  size(var(--nav-btn-width))
  flex-direction: column
  box-shadow: 1px 0 0 0 var(--border-flare-fg),
              inset -1px 0 0 0 var(--border-fg),
              inset 0 1px 0 0 var(--border-flare-fg)

// ---
// -- Container of panels buttons
// -
.NavigationBar .panels-box
  box(relative, flex)
  flex-wrap: wrap
  flex-grow: 1
  overflow: hidden

.Sidebar[data-nav-inline] .NavigationBar .panels-box
  flex-wrap: nowrap

#root[data-nav-layout="horizontal"] .NavigationBar .panels-box
#root[data-nav-layout="hidden"] .NavigationBar .panels-box
  flex-direction: row
#root[data-nav-layout="vertical"] .NavigationBar .panels-box
  flex-direction: column

// ---
// -- Navigational button
// -
.NavigationBar .panel-btn
  box(relative, flex)
  width: var(--nav-btn-width)
  height: var(--nav-btn-height)
  justify-content: center
  align-items: center
  flex-shrink: 0
  overflow: hidden
  opacity: var(--nav-btn-opacity)
  z-index: 10
  transition: opacity var(--d-fast), transform var(--d-fast), z-index var(--d-fast)

  // for dragenter
  &:before
    content: ''
    box(absolute)
    size(100%, same)
    pos(0, 0)
    z-index: 1

  &:hover
    background-color: #00000012
    opacity: var(--nav-btn-opacity-hover)

  &[data-active="true"]
    background-color: var(--nav-btn-activated-bg)
    opacity: var(--nav-btn-activated-opacity)

  &:active
    opacity: var(--nav-btn-opacity-active)
    transition: none

  &[data-hidden="true"]
    box(none)

  &[data-loading="true"]
    cursor: progress

.Sidebar[data-nav-inline] .panel-btn
  box(absolute)

  &[data-hidden="true"]
    box(flex)
    opacity: 0
    z-index: -1
    transform: scale(0, 0)

  // Button x position
  for i in 0..24
    &[data-index=\"{i}\"]
      transform: "translateX(calc(var(--nav-btn-width) * %s))" % i

#root[data-nav-layout="vertical"] .Sidebar .panel-btn[data-type="hidden"] > svg
  transform: rotateZ(-90deg)

// ---
// -- Nav button icon
// -
.Sidebar .panel-btn > svg
.Sidebar .panel-btn > img
  box(absolute)
  size(16px, same)
  fill: var(--container-fg, var(--nav-btn-fg))
  transform: translateZ(0)
  transition: opacity var(--d-fast)

.Sidebar .panel-btn[data-updated] > svg
.Sidebar .panel-btn[data-updated] > img
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.Sidebar .panel-btn[data-proxified] > svg
.Sidebar .panel-btn[data-loading] > svg
.Sidebar .panel-btn[data-proxified] > img
.Sidebar .panel-btn[data-loading] > img
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

.Sidebar .panel-btn .name
  display: none

// ---
// -- Progress spinner
// -
.Sidebar .panel-btn .progress-spinner
  box(absolute, border-box)
  size(12px, same)
  pos(50%, 50%)
  border-radius: 50%
  opacity: 0
  overflow: hidden
  transition: opacity var(--d-norm)
  border-top: 2px solid var(--tabs-loading-fg)
  border-left: 2px solid var(--inactive-fg)
  border-right: 2px solid var(--inactive-fg)
  border-bottom: 2px solid var(--inactive-fg)

.Sidebar .panel-btn[data-loading] .progress-spinner
  animation: progress-animation .5s infinite linear

.Sidebar .panel-btn[data-loading="true"] .progress-spinner
  opacity: 1

// ---
// -- Update / Highlight badge
// -
.Sidebar .panel-btn .update-badge
  box(absolute)
  size(6px, same)
  pos(calc(50% + 3px), calc(50% + 3px))
  border-radius: 50%
  background-color: var(--nav-btn-update-badge-bg)
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm)

.Sidebar .panel-btn[data-updated] .update-badge
  opacity: 1
  transform: scale(1, 1)

// ---
// -- Ok / Err badge
// -
.Sidebar .panel-btn .ok-badge
.Sidebar .panel-btn .err-badge
  box(absolute)
  size(12px, same)
  pos(50%, 50%)
  border-radius: 50%
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm)
  > svg
    box(absolute)
    size(100%, same)

.Sidebar .panel-btn[data-loading="ok"] .ok-badge
.Sidebar .panel-btn[data-loading="err"] .err-badge
  opacity: 1
  transform: scale(1, 1)

.Sidebar .panel-btn .ok-badge > svg
  fill: var(--true-fg)

.Sidebar .panel-btn .err-badge > svg
  fill: var(--false-fg)

// ---
// -- Length of panel
// -
.Sidebar .panel-btn .len
  box(absolute)
  pos(1px, r: 1px)
  font: var(--tabs-count-font)
  padding: 0 2px 0 2px
  color: var(--title-fg)
  background-color: var(--ctx-menu-bg)
  border-radius: 5px
  transform: translateZ(0)

// ---
// -- Settings button
// -
.Sidebar .settings-btn
  box(relative, flex)
  width: var(--nav-btn-width)
  height: var(--nav-btn-height)
  justify-content: center
  align-items: center
  flex-shrink: 0
  &:hover > svg
    opacity: .7
  &:active > svg
    transition: none
    opacity: .5
  > svg
    box(absolute)
    size(16px, same)
    fill: var(--nav-btn-fg)
    opacity: .5
    transition: opacity var(--d-fast)
